<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    .v-enter-active,
    .v-leave-active {
        transition: all .8s ease;
    }

    .v-enter, .v-leave-to{
        transform: translateX(100px);
        opacity: 0;
    }

</style>
<body>
<div id="app">
    <a href="" @click.prevent="comname='login'">登录</a> | <a href="" @click.prevent="comname='register'">注册</a>

    <transition mode="out-in">
        <componment :is="comname"></componment>
    </transition>


</div>
<script>
    Vue.component('login',{
        template:'<h3>登录组件</h3>'
    })

    Vue.component('register',{
        template:'<h3>注册组件</h3>'
    })
    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            msg:'信息',
            flag:true,
            comname:'login'
        },
        methods:{

        }
    })
</script>
</body>
</html>
